<template>
  <div class="helpList" style="min-height: 300px">
    <div class="left">
      <sidebar-item
        v-for="(data, index) in helpList"
        :data="data"
        :index="index"
        :active-inx="selectIndex"
        @item-click="itemClick(index)"
      ></sidebar-item>
    </div>
    <div class="right">
      <div class="content" v-html="description">
<!--        {{description}}-->
      </div>
    </div>
  </div>
</template>
<script>
  import { helpList,helpDetail } from "@/api/user";
  import sidebarItem from "@/components/sidebarItem";
  export default {
    components: { sidebarItem },
    data() {
      return {
        helpList:[],
        description:'',
        menuCurrentId: '1',
        selectIndex:0,
        id:''
      };
    },
    created() {
      helpList().then(res=>{
        console.log(res.data)
        if(res.code==200){
          this.helpList = res.data
          this.id =  this.helpList[this.selectIndex].ID
          helpDetail(this.id).then(res=>{
            if(res.code==200){
              this.description = res.data.description
            }
          })
        }
      })
    },
    methods: {
      itemClick(index) {
       this.selectIndex = index
       this.id =  this.helpList[this.selectIndex].ID
        helpDetail(this.id).then(res=>{
          if(res.code==200){
            this.description = res.data.description
          }
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/components/leftSidebar.scss";
  @import "@/assets/scss/help/help.scss";
</style>
<style>
  .el-dialog__header{
    border-bottom: 1px solid #E6E6E6;
  }
</style>
